<!--员工管理-->
<template>
  <div class="ele-body">
    <el-form
      :hide-required-asterisk="true"
      ref="allform"
      :model="allform"
      label-width="74px"
      @keyup.enter.native="submit"
      @submit.native.prevent
    >
      <el-card>
        <div class="flex-align-center keyword-top">
          <div class="keyword-title">员工列表</div>
        </div>
        <el-row :gutter="15" class="flex-align-center m-bottom20">
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="员工账号" style="margin-bottom: 0;width: 90%">
              <el-input
                v-model="allform.staffCode"
                placeholder="请输入员工账号"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="员工姓名" style="margin-bottom: 0;width: 90%">
              <el-input
                v-model="allform.staffName"
                placeholder="请输入员工姓名"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="联系方式" style="margin-bottom: 0;width: 90%;">
              <el-input
                v-model="allform.phone"
                placeholder="请输入联系方式"
                clearable
              />
            </el-form-item>
          </el-col>
          <el-col :xs="12" :sm="12" :lg="6" :xl="6">
            <el-form-item label="是否冻结:" style="margin-bottom: 0;width: 90%;">
              <el-select
                clearable
                v-model="allform.status"
                placeholder="请选择"
                class="ele-fluid"
              >
                <el-option label="启用" :value="1" />
                <el-option label="冻结" :value="2" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :lg="14" :xl="14" style="padding-left:40px;">
            <el-button
              icon="el-icon-zoom-out"
              size="small"
              type="primary"
              class="colorBlue"
              @click="query"
            >
              查询
            </el-button>
            <el-button
              icon="el-icon-refresh-right"
              size="small"
              class="resetting-btn"
              @click="reload"
            >
              重置
            </el-button>
          </el-col>
        </el-row>

        <!-- 数据表格 -->
        <ele-pro-table
          ref="table"
          :selection.sync="selection"
          :columns="columns"
          :datasource="datasource"
          height="calc(100vh - 265px)"
          full-height="calc(100vh - 116px)"
          tool-class="ele-toolbar-form"
          cache-key="systemOrgUserTable"
        >
          <!-- 表头工具栏 -->
          <template v-slot:toolbar>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-plus"
              class="ele-btn-icon"
              @click="openEdit()"
            >
              添加
            </el-button>
            <el-button
              size="small"
              type="danger"
              icon="el-icon-delete"
              class="ele-btn-icon"
              @click="openDel()"
            >
              删除
            </el-button>
          </template>
          <template v-slot:password="{ row }">
            <!--:readonly="true" 只读-->
            <el-input
              οnfοcus=“this.blur()”
              class="input-class"
              show-password
              maxlength="0"
              v-model="row.password"
            />
          </template>
          <!-- 冻结 状态列 -->
          <template v-slot:status="{ row }">
            <el-switch
              :active-value="2"
              :inactive-value="1"
              v-model="row.status"
              @change="editStatus(row)"
            />
          </template>
          <!-- 操作列 -->
          <template v-slot:action="{ row }">
            <el-link
              class="m-right20"
              type="primary"
              :underline="false"
              icon="el-icon-edit"
              @click="openEdit(row)"
            >
              编辑
            </el-link>
            <el-popconfirm
              class="ele-action"
              title="确定要删除该员工吗？"
              @confirm="remove(row)"
            >
              <template v-slot:reference>
                <el-link type="danger" :underline="false" icon="el-icon-delete">
                  删除
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </ele-pro-table>
      </el-card>
    </el-form>
    <!--    添加员工-->
    <userAdd ref="showEdit" :data="current" @search="reload"></userAdd>
  </div>
</template>

<script>
  import userAdd from './components/org-user-add';
  import { staffPage,staffDel,staffUpdate } from '@/api/staffManage/employeeList';
  import {updateUserStatus} from "@/api/oem";
  export default {
    name: "index",
    components: { userAdd},
    data() {
      return {
        form:{},
        // 表格选中数据
        selection: [],
        // 表格列配置
        columns: [
          // 复选框选择
          {
            columnKey: 'selection',
            type: 'selection',
            align: 'center'
          },
          {
            prop: 'staffCode',
            label: '员工账号',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'staffName',
            label: '员工姓名',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'phone',
            label: '联系方式',
            sortable: 'custom',
            showOverflowTooltip: true,
          },
          {
            prop: 'status',
            label: '是否冻结',
            align: 'center',
            sortable: 'custom',
            resizable: false,
            slot: 'status',
            showOverflowTooltip: true
          },
          /*{
            prop: 'password',
            label: '密码',
            slot: 'password',
            sortable: 'custom',
            showOverflowTooltip: true,
          },*/
          {
            columnKey: 'action',
            label: '操作',
            align: 'center',
            resizable: false,
            slot: 'action',
            showOverflowTooltip: true
          }
        ],
        // 当前编辑数据
        current: null,
        allform:{
        },

      };
    },
    methods: {
      /* 表格数据源 */
      datasource({ page, limit, where, order }) {
        console.log("allform",this.allform)
        console.log(" page, limit, where, order", page, limit, where, order)
        return staffPage({
          ...where,
          ...order,
          page,
          limit,
          ...this.allform,
          merchantId: this.$store.state.user.info.merchantId
        });
        this.reload(where)
      },
      /* 更改状态 */
      editStatus(row) {
        console.log("row",row)
        // row.status= row.status==2 ? 1 : 2
        console.log("row.status",row.status)

        staffUpdate(row)
          .then((data) => {
            console.log("状态更改row",row)
            this.$message.success( row.status==1?'启用成功！' :'冻结成功！');
          })
          .catch((e) => {
            this.$message.error(row.status==1?'启用失败！' :'冻结失败！');
          });
      },
      query(where){
        if(!this.allform.staffName){
          delete this.allform.staffName
        }
        if(!this.allform.staffCode){
          delete this.allform.staffCode
        }
        if(!this.allform.phone){
          delete this.allform.phone
        }

        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
        // this.$refs.table.reload({ page: 1, where: where , ...this.allform });
      },
      /* 刷新表格 */
      reload(where) {
        // 删除员工搜索字段
        this.allform.staffName=''
        this.allform.staffCode=''
        this.allform.phone=''
        delete this.allform.staffName
        delete this.allform.staffCode
        delete this.allform.phone
        this.$nextTick(()=>{
          this.$refs['table'].reload()
        })
      },
      /* 显示编辑 */
      openEdit(row) {
        console.log("row",row)
        this.current = row;
        setTimeout(()=>{
          this.$refs['showEdit'].show()
        },300)
      },
      // 多个删除
      openDel(){
        if (!this.selection.length) {
          // 请选择需要操作的数据
          this.$message.error('请选择数据');
          return;
        }
        this.$confirm('确定要删除该员工吗?', '提示', {
          type: 'warning'
        })
          .then(() => {
            var ids=this.selection.map(item => {
              return item.id
            })
            console.log('删除点击事件his.selection===', this.selection ,'ids',ids)
            this.delStaff(ids)
          })
          .catch(() => {
            this.$message.info("已取消删除")
          });
      },
      /* 删除 */
      remove(row) {
        let ids=[]
        ids.push(row.id)
        this.delStaff(ids)
      },
      delStaff(ids){
        const loading = this.$loading({ lock: true });
        staffDel({
          ids:ids
        })
          .then((data) => {
            loading.close();
            this.$message.success(data.msg);
            this.reload();
          })
          .catch((e) => {
            loading.close();
            this.$message.error(e);
          });
      },
    },
  }
</script>

<style scoped lang="less">
  .keyword-top{
    padding:4px 4px 20px;
    .keyword-title{
      font-size: 20px;
      line-height: 24px;
      margin-right: 20px;
      color: #000000;
    }
    .border{
      border-radius: 5px;
      overflow: hidden;
      .no-select-type,.select-type{
        width: 68px;
        height: 29px;
      }
      .select-type{
        background: #1E6CEB;
        color: #FFFFFF;
      }
      .no-select-type{
        border: 1px solid #F5F5F5;
        color: #ABAFB5;
      }
    }
  }
  .resetting-btn{
    background: #F5F5F5;
  }

</style>
